<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渲染函数</title>
  </head>

  <body>
    <div id="app">
      <my-root></my-root>
    </div>
  </body>
  <template id="root">
    <div class="container">
      <header class="header">header</header>
      <div class="content">
        <span>content</span>
        <my-com></my-com>
      </div>
      <footer class="footer">footer</footer>
    </div>
  </template>
  <script src="../lib/vue.global.js"></script>
  <script>
    const { h } = Vue;
    const MyCom = {
      template: "<mark>标记</mark>",
    };
    Vue.createApp({
      components: {
        //   MyRoot: { // 模版写法
        //     template: '#root',
        //    components: {
        //     MyCom: MyCom
        //   },
        // }
        MyRoot: {
          // 渲染函数可以生成标签以及组件（定义完组件无需注册）
          render() {
            return [
              h("div", { class: "container" }, [
                h("header", { class: "header" }, "header"),
                h("div", { class: "content" }, [
                  h("span", "content"),
                  h(MyCom),
                ]),
                h("footer", { class: "footer" }, "footer"),
              ]),
            ];
          },
        },
      },
    }).mount("#app");
  </script>
</html>
